<template>
  <div>
    <Card>
      <SearchForm @get="handleSearch" @clearNav="clearNavigation"></SearchForm>
    </Card>
    <Card>
      <Row>
        <Col span="4">
          <TraceNavigation ref="nav" @getChart="handleGetChart"></TraceNavigation>
        </Col>
        <Col span="20">
          <TraceWrapper ref="wrapper"></TraceWrapper>
          <TraceChart ref="chart" @getDetail="handleGetDetail"></TraceChart>
        </Col>
      </Row>
    </Card>
    <TraceDetail ref="detail"></TraceDetail>
  </div>
</template>
<script lang="ts" setup>
import { Card, Row, Col } from 'ant-design-vue';
import { ref } from 'vue';
import TraceNavigation from './component/TraceNavigation.vue';
import TraceWrapper from './component/TraceWrapper.vue';
import SearchForm from './component/SearchForm.vue';
import TraceChart from './component/TraceChart.vue';
import TraceDetail from './component/TraceDetail.vue';
import { getTraceById } from '/@/api/maintenance-center/skywalking/trace/trace';
import { TraceItem } from '/@/api/maintenance-center/skywalking/trace/model/traceModel';
const chartInfo = ref<TraceItem[]>([]);
const nav = ref();
const wrapper = ref();
const chart = ref();
const detail = ref();
// 获取chart数据
const handleGetChart = async (navRecord) => {
  if (navRecord !== undefined) {
    chartInfo.value = await getTraceById(navRecord.traceIds[0]);
    wrapper.value.setInfo(
      chartInfo.value.length,
      navRecord.traceIds[0],
      navRecord.title,
      navRecord.duration,
      navRecord.start
    );
    chart.value.clearChart();
    chart.value.setChart(chartInfo.value);
  } else {
    wrapper.value.clearInfo();
    chart.value.clearChart();
  }
};
// 打开详情
const handleGetDetail = (nodeId) => {
  if (nodeId.substring(0, 9) == 'duration-') {
    nodeId = nodeId.substring(9, nodeId.length);
  }
  let record = {};
  chartInfo.value.forEach((item) => {
    if (item.nodeId == nodeId) {
      record = item;
    }
  });
  detail.value.openDetail(record);
};
// 处理查询
const handleSearch = async (searchFormParams) => {
  nav.value.setList(searchFormParams);
  wrapper.value.clearInfo();
  chart.value.clearChart();
};
const clearNavigation = () => {
  nav.value.clearList();
};
</script>
